<template>
	<view class="content">
		<view class="identify" v-if="type=='add'">
			<view class="iden_tit">示例：多米街，136xxxx0000，河南省郑州市郑东新区某小区</view>
			<textarea v-model="idenAddress" @blur="bindTextAreaBlur" placeholder="请粘贴或输入文本,点击识别,自动识别姓名,电话和地址"></textarea>
			<view class="flex_end iden_btns">
				<view class="iden_btn" @click="identifyAddress">识别</view>
				<view class="iden_btn" @click="copy">粘贴</view>
			</view>
		</view>
		<view class="row b-b">
			<text class="tit">联系人</text>
			<input class="input" type="text" v-model="addressData.realname" placeholder="收货人姓名"
				placeholder-class="placeholder" />
		</view>
		<view class="row b-b">
			<text class="tit">手机号</text>
			<input class="input" type="number" v-model="addressData.mobile" placeholder="收货人手机号码"
				placeholder-class="placeholder" />
		</view>
		<picker @change="bindPickerChange" :value="provinceindex" :range="provinces" :range-key="'areaname'">
			<view class="row b-b">
				<text class="tit">省</text>
				<view class="uni-list-cell-db" v-if="provinces.length>0">
					<view class="uni-input">{{addressData.province}}</view>
				</view>
			</view>
		</picker>
		<picker @change="bindPickerChange2" :value="cityindex" :range="city" :range-key="'areaname'">
			<view class="row b-b">
				<text class="tit">市</text>
				<view class="uni-list-cell-db">
					<view class="uni-input">{{addressData.city}}</view>
				</view>
			</view>
		</picker>
		<picker @change="bindPickerChange3" :value="districtindex" :range="district" :range-key="'areaname'">
			<view class="row b-b">
				<text class="tit">县</text>
				<view class="uni-list-cell-db">
					<view class="uni-input">{{addressData.area}}</view>
				</view>
			</view>
		</picker>
		<view class="row b-b">
			<text class="tit">详细地址</text>
			<input class="input" type="text" v-model="addressData.address" placeholder="详细地址"
				placeholder-class="placeholder" />
		</view>

		<view class="row default-row">
			<text class="tit">设为默认</text>
			<switch :checked="addressData.isdefault==1" color="#8405dc" @change="switchChange" />
		</view>
		<button class="add-btn" @click="confirm">提交</button>
		<button class="add-btn" @click="removeconfirm"
			style="background-color: #fff;box-shadow: 1px 2px 5px #fff;color: #000;">删除</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				addressData: {
					realname: '',
					mobile: '',
					address: '',
					address: '',
					default: false,
					province: "请选择",
					city: "请选择",
					area: "请选择",
					address: "",
					isdefault: 0
				},
				provinces: [],
				provinceindex: 0,
				provinceindexid: 0,
				provincestext: "请选择",
				city: [],
				cityindex: 0,
				cityindexid: 0,
				citytext: "请选择",
				district: [],
				districtindex: 0,
				districtindexid: 0,
				districttext: "请选择",
				id: "",
				cartids: '',
				btype: '',
				source: '',
				type: '',
				optionid: '',
				total: '',
				shopid: '',
				isVip: 0,
				isGroupBuy: 0,
				idenAddress: ''
			}
		},
		onLoad(option) {
			var that = this;
			let title = '新增收货地址';
			that.cartids = option.cartids;
			that.type = option.type;
			that.btype = option.btype;
			that.id = option.id;
			that.optionid = option.optionid;
			that.total = option.total;
			that.shopid = option.shopid;
			that.source = option.source;
			that.isVip = option.isVip;
			that.isGroupBuy = option.isGroupBuy;
			if (option.type === 'edit') {
				title = '编辑收货地址'
				this.addressData = JSON.parse(option.data);
			}
			this.manageType = option.type;
			uni.setNavigationBarTitle({
				title
			})
		},
		onShow() {
			var that = this;
			this.$axios('getaddress/info', "POST", 'shop', {

			}).then(res => {
				if (res.data.code == 200) {
					that.provinces = res.data.data.data;
					that.provinceindexid = res.data.data.data[0].id;
					// #ifdef APP-PLUS|| MP-WEIXIN
					// if (that.type == 'add') {
					// 	uni.getClipboardData({
					// 		success: function(ress) {
					// 			uni.setClipboardData({
					// 				data: ''
					// 			})
					// 			if (ress.data != '') {
					// 				var str = ress.data;
					// 				str = str.replace(
					// 					/[\ |\~|\`|\!|\@|\#|\$|\%|\^|\&|\*|\(|\)|\-|\_|\+|\=|\||\\|\[|\]|\{|\}|\;|\:|\"|\'|\,|\<|\.|\>|\/|\?|\，]/g,
					// 					"");
					// 				that.formataddress(str, that.provinces);
					// 			}
					// 		}
					// 	});
					// }
					// #endif
				}
			}, (error) => {

			})

		},
		methods: {
			bindTextAreaBlur: function (e) {
			    console.log(e.detail.value)
			},
			copy(){
				uni.getClipboardData({
					success: res=> {
						this.idenAddress = res.data;
					}
				});
			},
			identifyAddress(){
				// var that = this;
				// #ifdef APP-PLUS|| MP-WEIXIN
				// var str = '';
				// str = that.idenAddress.replace(
				// 	/[\ |\~|\`|\!|\@|\#|\$|\%|\^|\&|\*|\(|\)|\-|\_|\+|\=|\||\\|\[|\]|\{|\}|\;|\:|\"|\'|\,|\<|\.|\>|\/|\?|\，]/g,
				// 	"");
				// that.formataddress(str, that.provinces);
				// that.formataddress(that.idenAddress, that.provinces);
				// #endif
				if(this.idenAddress!=''){
					this.$axios('address/autoAddress','POST','shop',{
						address: this.idenAddress
					}).then(res=>{
						if(res.data.code == 200){
							this.addressData = res.data.data;
						}
					})
				}else{
					this.$api.msg('粘贴地址不完整')
				}
			},
			formataddress(res, list) {
				var preg = /1[3456789]\d{9}/;
				var phone = res.match(preg);
				var realname = '',
					add = false;
				var provinceArr = res.split(phone);
				var prreg = /.+?(省|市|自治区|自治州|县|区)/g;
				for (let i = 0; i < provinceArr.length; i++) {
					if (provinceArr[i].match(prreg)) {
						var arr = provinceArr[i].match(prreg).toString().split(",");
						if (arr.length > 2) {
							for (let m = 0; m < list.length; m++) {
								if (provinceArr[i].indexOf(list[m].areaname) != -1) {
									add = true;
									this.addressData.province = list[m].areaname;
									var isname = provinceArr[i].split(list[m].areaname);
									if (isname[0] && isname[0] != ' ') {
										realname = isname[0];
									}
									if (isname.length >= 3) {
										provinceArr[i] = list[m].areaname + isname[isname.length - 1];
									} else {
										provinceArr[i] = isname[isname.length - 1];
									}
									var arr1 = provinceArr[i].match(prreg).toString().split(",");
									this.addressData.city = arr1[0].indexOf('市') == 0 ? arr1[0].substring(1) : arr1[0];
									this.addressData.area = arr1[1];
									this.addressData.address = provinceArr[i].split(arr1[1])[1]
									break;
								}
							}
						}else{
							this.$api.msg('粘贴地址不完整')
						}
					} else {
						if (provinceArr[i]) {
							realname = provinceArr[i];
						}
					}
				}
				if (add) {
					this.addressData.mobile = Number(phone);
					this.addressData.realname = realname;
				}
			},
			switchChange(e) {
				if (e.detail.value == true) {
					this.addressData.isdefault = 1;
				} else {
					this.addressData.isdefault = 0;
				}
			},
			// 省
			bindPickerChange(e) {
				var that = this;
				that.provinceindex = e.target.value;
				that.provinceindexid = that.provinces[e.target.value].id;
				that.addressData.province = that.provinces[e.target.value].areaname
				this.$axios('getaddress/info', "POST", 'shop', {
					type: "city",
					parentid: that.provinceindexid
				}).then(res => {
					if (res.data.code == 200) {
						that.city = res.data.data.data;
						that.cityindexid = res.data.data.data[0].id;
					}
				}, (error) => {

				})
			},
			// 市
			bindPickerChange2(e) {
				var that = this;
				that.cityindex = e.target.value;
				that.cityindexid = that.city[e.target.value].id;
				that.addressData.city = that.city[e.target.value].areaname
				this.$axios('getaddress/info', "POST", 'shop', {
					type: "district",
					parentid: that.cityindexid
				}).then(res => {
					if (res.data.code == 200) {
						that.district = res.data.data.data;
						that.districtindexid = res.data.data.data[0].id;
					}
				}, (error) => {

				})
			},
			// 县
			bindPickerChange3(e) {
				var that = this;
				that.districtindex = e.target.value;
				that.districtindexid = that.district[e.target.value].id;
				that.addressData.area = that.district[e.target.value].areaname
			},
			//提交
			confirm() {
				var that = this;
				let data = this.addressData;
				if (!that.addressData.realname) {
					this.$api.msg('请填写收货人姓名');
					return;
				}
				if (!/(^1[2|3|4|5|6|7|8|9][0-9]{9}$)/.test(that.addressData.mobile)) {
					this.$api.msg('请输入正确的手机号码');
					return;
				}

				if (!that.addressData.address) {
					this.$api.msg('请填写详细地址');
					return;
				}
				this.$axios('address/submit', "POST", 'shop', {
					realname: that.addressData.realname,
					mobile: that.addressData.mobile,
					province: that.addressData.province,
					city: that.addressData.city,
					area: that.addressData.area,
					address: that.addressData.address,
					isdefault: that.addressData.isdefault,
					id: that.addressData.id
				}).then(res => {
					if (res.data.code == 200) {
						this.$api.msg('提交成功');
						uni.redirectTo({
							url: '/pages/address/address?type=' + this.btype + '&cartids=' + this.cartids +
								'&source=' + this.source + '&id=' + this.id + '&shopid=' + this.shopid +
								'&total=' + this.total + '&optionid=' + this.optionid + '&isVip=' + this.isVip+ '&isGroupBuy=' + this.isGroupBuy
						})
					}
				}, (error) => {

				})
			},
			removeconfirm: function() {
				var that = this;
				this.$axios('address/remove', "POST", 'shop', {
					id: that.addressData.id
				}).then(res => {
					if (res.data.code == 200) {
						this.$api.msg('删除成功');
						setTimeout(() => {
							uni.redirectTo({
								url: '/pages/address/address?type=' + this.btype +
									'&cartids=' + this.cartids + '&source=' + this.source +
									'&id=' + this.id + '&shopid=' + this.shopid + '&total=' +
									this.total + '&optionid=' + this.optionid
							})
						}, 1000)

					}
				}, (error) => {

				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: $page-color-base;
		padding-top: 16upx;
	}
	.identify{
		margin: 0 auto 18rpx;
		background: #fff;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		overflow: hidden;
		width: 96%;
		height: 270rpx;
		font-size: 24rpx;
		position: relative;
		.iden_tit{
			background: $bg-color;
			color: #fff;
			text-align: center;
			padding: 10rpx 0;
		}
		textarea{
			width: 100%;
			height: 180rpx;
			padding: 20rpx;
		}
		.iden_btns{
			position: absolute;
			right: 20rpx;
			bottom: 10rpx;
			z-index: 2;
		}
		.iden_btn{
			width: 96rpx;
			// padding: 0 10rpx;
			line-height: 48rpx;
			background:  $bg-color;
			border-radius: 26rpx;
			color: #fff;
		    text-align: center;
			margin-left: 12rpx;
			// float: right;
		}
	}
	.row {
		display: flex;
		align-items: center;
		position: relative;
		padding: 0 30upx;
		height: 110upx;
		background: #fff;

		.tit {
			flex-shrink: 0;
			margin-right: 10upx;
			width: 120upx;
			font-size: 30upx;
			color: $font-color-dark;
		}

		.input {
			flex: 1;
			font-size: 30upx;
			color: $font-color-dark;
		}

		.icon-shouhuodizhi {
			font-size: 36upx;
			color: $font-color-light;
		}
	}

	.default-row {
		margin-top: 16upx;

		.tit {
			flex: 1;
		}

		switch {
			transform: translateX(16upx) scale(.9);
		}
	}

	.add-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 690upx;
		height: 80upx;
		margin: 60upx auto;
		font-size: $font-lg;
		color: #fff;
		background-color: $base-color;
		border-radius: 10upx;
		box-shadow: 1px 2px 5px rgba(113, 57, 69, 0.4);
	}
</style>